<template>
  <el-button class="common-button" :class="{ 'is-secondary': secondary }"
             :type="type" :size="size" :icon="icon"
             :nativeType="nativeType" :loading="loading"
             :disabled="disabled" :plain="plain" :autofocus="autofocus"
             :round="round" :circle="circle" @click="handleClick">
    <span v-if="$slots.default"><slot></slot></span>
  </el-button>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'small'
    },
    icon: {
      type: String,
      default: ''
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
    secondary: Boolean,
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@/style/variables.less';

  .common-button {
    /deep/.iconfont {
      font-size: 12px;
      margin-right: 6px;
      &.is-right {
        margin-right: 0;
        margin-left: 6px;
      }
    }
  }

  .is-secondary {
    color: @--color-text-regular;
    background: #ffffff;
    border-color: @--border-color-base;
    &.el-button--primary {
      color: @--color-primary;
    }
    &.el-button--success {
      color: @--color-success;
    }
    &.el-button--warning {
      color: @--color-warning;
    }
    &.el-button--danger {
      color: @--color-danger;
    }
    &:hover,
    &:focus {
      color: @--color-primary-hover;
      border-color: @--color-primary-hover;
      &.el-button--success {
        color: @--color-success-hover;
        border-color: @--color-success-hover;
      }
      &.el-button--warning {
        color: @--color-warning-hover;
        border-color: @--color-warning-hover;
      }
      &.el-button--danger {
        color: @--color-danger-hover;
        border-color: @--color-danger-hover;
      }
    }
    &:active {
      color: @--color-primary-active;
      border-color: @--color-primary-active;
      &.el-button--success {
        color: @--color-success-active;
        border-color: @--color-success-active;
      }
      &.el-button--warning {
        color: @--color-warning-active;
        border-color: @--color-warning-active;
      }
      &.el-button--danger {
        color: @--color-danger-active;
        border-color: @--color-danger-active;
      }
    }
    &.is-disabled {
      color: @--color-text-placeholder !important;
      background: @--button-disabled-background-color !important;
      border-color: @--button-disabled-border-color !important;
    }
  }
</style>
